<!-- src/views/LoggingPage.vue -->
<template>
    <div class="logging-page-container" v-loading="isLoading" element-loading-text="正在加载配置...">
        <div class="page-header">
            <h1>日志管理</h1>
            <p class="description">
                开启日志存储后，对象存储（OSS）会将访问此存储桶的详细日志，以文件的形式自动投递到您指定的目标存储桶中，便于您进行数据审计与分析。
            </p>
        </div>

        <el-card class="box-card config-section">
            <template #header>
                <div class="card-header">
                    <span>日志存储配置</span>
                    <el-switch v-model="configForm.enabled" :disabled="!isEditing" @change="handleSwitchChange" />
                </div>
            </template>

            <div v-if="!isEditing && !configForm.enabled" class="status-display">
                <el-empty description="当前未开启日志存储">
                    <el-button type="primary" @click="handleEdit">立即配置</el-button>
                </el-empty>
            </div>

            <div v-if="!isEditing && configForm.enabled" class="status-display">
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="目标存储桶">{{ configForm.target_bucket }}</el-descriptions-item>
                    <el-descriptions-item label="日志前缀">{{ configForm.target_prefix || '(未设置)' }}</el-descriptions-item>
                </el-descriptions>
                <div class="action-buttons-display">
                    <el-button type="primary" @click="handleEdit">修改配置</el-button>
                    <el-button @click="goToLogViewer">前往查看日志</el-button>
                </div>
            </div>

            <el-form v-if="isEditing" ref="formRef" :model="configForm" :rules="formRules" label-width="120px">
                <div v-if="configForm.enabled">
                    <el-form-item label="目标存储桶" prop="target_bucket">
                        <el-select v-model="configForm.target_bucket" placeholder="请选择一个符合规范的日志存储桶" style="width: 100%;"
                            filterable no-data-text="没有找到符合规范的日志存储桶">
                            <!-- 直接遍历筛选后的列表 -->
                            <el-option v-for="bucket in selectableLogBuckets" :key="bucket.name" :label="bucket.name"
                                :value="bucket.name" />
                        </el-select>
                        <div class="form-item-help">
                            仅显示名称中包含 "log" 的存储桶。请确保您已创建专门用于存放日志的存储桶。
                        </div>
                    </el-form-item>

                    <el-form-item label="日志前缀" prop="target_prefix">
                        <el-input v-model="configForm.target_prefix" placeholder="例如：access-logs/ or my-app/logs/" />
                        <div class="form-item-help">为存储的日志文件指定一个路径前缀，便于管理。可以留空。</div>
                    </el-form-item>
                </div>

                <p v-else style="text-align: center; color: #909399;">关闭日志存储后，将不再生成新的访问日志文件。</p>

                <el-form-item>
                    <div class="action-buttons-form">
                        <el-button type="primary" @click="handleSave" :loading="isSaving"
                            :disabled="isSaveButtonDisabled">保 存
                        </el-button>
                        <el-button @click="handleCancel">取 消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 日志文件列表将在下一阶段实现 -->
        <!-- <el-card class="box-card log-list-section" v-if="configForm.enabled && !isEditing"> ... </el-card> -->
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getBucketLoggingConfig, setBucketLoggingConfig, deleteBucketLoggingConfig, getAllBuckets } from '@/api/logging.js';
import { useRouter } from 'vue-router';
const router = useRouter();

// 1. 响应式状态定义
const props = defineProps({
    bucketName: { type: String, required: true }
});

const isLoading = ref(true);
const isSaving = ref(false);
const isEditing = ref(false);

const formRef = ref(null);
const configForm = reactive({
    enabled: false,
    target_bucket: '',
    target_prefix: '',
});

const originalConfig = reactive({ ...configForm }); // 用于“取消”操作
const bucketList = ref([]);

const formRules = {
    target_bucket: [
        { required: true, message: '请选择目标存储桶', trigger: 'change' }
    ]
};

// 2. 计算属性
const availableBuckets = computed(() => {
    return bucketList.value.filter(b => b.name !== props.bucketName);
});

//【核心新增】创建推荐列表的计算属性
// const recommendedBuckets = computed(() => {
//     return availableBuckets.value.filter(b =>
//         b.name.toLowerCase().includes('log') || b.name.toLowerCase().includes('logging')
//     );
// });

const selectableLogBuckets = computed(() => {
    return bucketList.value
        // 1. 先过滤掉当前桶
        .filter(b => b.name !== props.bucketName)
        // 2. 再筛选出符合日志桶命名规范的
        .filter(b => b.name.toLowerCase().includes('log'));
    // 您也可以使用更严格的 | b.name.toLowerCase().includes('logging')
});


// 3. API 调用函数
const fetchConfigData = async () => {
    isLoading.value = true;
    try {
        // 并发获取日志配置和存储桶列表
        const [configRes, bucketsRes] = await Promise.all([
            getBucketLoggingConfig(props.bucketName),
            getAllBuckets(),
        ]);

        // 更新日志配置表单
        configForm.enabled = configRes.data.enabled;
        configForm.target_bucket = configRes.data.target_bucket || '';
        configForm.target_prefix = configRes.data.target_prefix || '';

        // 备份原始配置
        Object.assign(originalConfig, configForm);

        // 更新存储桶列表
        bucketList.value = bucketsRes.data.items || [];

    } catch (error) {
        console.error('获取日志配置或Bucket列表失败:', error);
        ElMessage.error('加载配置信息失败，请稍后重试。');
    } finally {
        isLoading.value = false;
    }
};

// 4. 事件处理函数
onMounted(fetchConfigData);

const handleEdit = () => {
    isEditing.value = true;
    if (configForm.target_bucket && configForm.target_prefix === '') {
        configForm.target_prefix = `${props.bucketName}/`;
    }
};

const handleCancel = () => {
    // 恢复到修改前的状态
    Object.assign(configForm, originalConfig);
    isEditing.value = false;
    formRef.value?.clearValidate();
};

const handleSwitchChange = (value) => {
    if (!value) {
        // 如果关闭开关，清空表单项以避免不必要的验证
        configForm.target_bucket = '';
        configForm.target_prefix = '';
    }
};

const isSaveButtonDisabled = computed(() => {
    // 如果日志开关是关闭的，允许保存（因为这是“关闭日志”操作）
    if (!configForm.enabled) {
        return false;
    }

    // 如果开关是开启的，则必须满足以下两个条件才能启用按钮
    // 1. 目标存储桶必须有值
    // 2. 日志前缀必须有值 (trim() 去除前后空格)
    return !configForm.target_bucket || !configForm.target_prefix.trim();
});

watch(
    // 1. 侦听的目标：用户选择的目标存储桶
    () => configForm.target_bucket,

    // 2. 回调函数：当目标变化时执行
    (newTargetBucket, oldTargetBucket) => {
        // 3. 核心逻辑：
        //    - 只有在编辑模式下才自动填充
        //    - 只有当用户新选择了一个桶时 (newTargetBucket 不为空)
        //    - 只有当日志前缀是空的，或者是根据上一个桶名自动生成的旧值时，才进行更新
        //      (这样可以避免覆盖用户自己的手动输入)
        const oldRecommendedPrefix = `${props.bucketName}/`;
        if (
            isEditing.value &&
            newTargetBucket &&
            (configForm.target_prefix === '' || configForm.target_prefix === oldRecommendedPrefix)
        ) {
            // 自动填充推荐的前缀，并确保以 '/' 结尾
            configForm.target_prefix = `${props.bucketName}/`;
        }
    }
);

const handleSave = async () => {
    isSaving.value = true;
    try {
        if (configForm.enabled) {
            // 如果开关是开启的，验证表单并提交
            await formRef.value.validate();
            await setBucketLoggingConfig(props.bucketName, {
                target_bucket: configForm.target_bucket,
                target_prefix: configForm.target_prefix,
            });
            ElMessage.success('日志配置已成功保存！');
        } else {
            // 如果开关是关闭的，调用删除/关闭接口
            await deleteBucketLoggingConfig(props.bucketName);
            ElMessage.success('日志存储已成功关闭！');
        }
        isEditing.value = false;
        await fetchConfigData(); // 重新加载最新配置
    } catch (error) {
        // validate() 失败会进入 catch
        if (error === false) return;
        console.error('保存日志配置失败:', error);
        ElMessage.error('操作失败，请检查配置或联系管理员。');
    } finally {
        isSaving.value = false;
    }
};

const goToLogViewer = () => {
    router.push({ name: 'BucketLogViewer', params: { bucketName: props.bucketName } });
};



</script>

<style scoped>
.logging-page-container {
    padding: 24px;
}

.page-header h1 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px;
}

.description {
    font-size: 14px;
    color: #606266;
    margin-bottom: 24px;
}

.box-card {
    margin-bottom: 24px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.form-item-help {
    color: #909399;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 4px;
}

.action-buttons-form {
    display: flex;
    justify-content: flex-start;
    /* 或者 center */
    width: 100%;
}

.status-display {
    padding: 16px 0;
}

.action-buttons-display {
    margin-top: 20px;
}
</style>